<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数传参</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .d {
            width: 80%;
            height: 400px;
            margin: 30px auto;
            border: 1px dotted pink;
        }

        button{
            margin-top: 30px;
            width: 80px;
            height: 30px;
        }
        .d1{
            width: 100%;
            margin: 30px auto;
        }
        .d2{
            border: 1px red double;
        }
    </style>
</head>
<body>
<div class="d">
    <div class="d1" style="background: aqua;">
        <div>改变背景色（传一个参数）</div>
        <button class="btn1" onclick="btn1('red')">红红</button>
        <button class="btn2" onclick="btn1('blue')">蓝蓝</button>
        <button class="btn3" onclick="btn1('pink')">粉粉</button>
    </div>
    <div class="d2 d1">
        <div>改变样式（传两个参数）</div>
        <button class="btn1" onclick="btn2('width','50%')">变短</button>
        <button class="btn2" onclick="btn2('backgroundColor','blue')">变蓝</button>
        <button class="btn3" onclick="btn2('height','90px')">变高</button>
    </div>
    <div class="d3 d1">
        <div>改变属性值（传参数加变量）</div>
        <button class="btn1" onclick="btn2('width','50%')">变短</button>
        <button class="btn2" onclick="btn2('backgroundColor','blue')">变蓝</button>
        <button class="btn3" onclick="btn2('height','90px')">变高</button>
    </div>
</div>
<script>
    function btn1(color) {
        var btn1=document.getElementsByClassName("d1")[0];
        btn1.style.backgroundColor=color;
    }
    function btn2(name,styles) {
        var btn2=document.getElementsByClassName("d2")[0];
        btn2.style[name]=styles;
    }
</script>
</body>
</html>